<template>
  <div class="orderdetail">
    <el-dialog title="订单信息" :visible.sync="dialogVisible" width="50%">
      <div class="orderdetail_top" style="">
        <div>
          <span style="color: #ccc">订单号：</span>
          <span style="font-weight: bold">{{orderdata.number}}</span>
          <button v-if="orderdata.status===2" class="orderdetail_top_btn" style="">待接单</button>
          <button v-if="orderdata.status===3"  class="orderdetail_top_btn" style="">待派送</button>
          <button v-if="orderdata.status===4" class="orderdetail_top_btn" style="">派送中</button>
          <button v-if="orderdata.status===5" class="orderdetail_top_btn" style="">已完成</button>
          <button v-if="orderdata.status===6" class="orderdetail_top_btn" style="">已取消</button>
          <button v-if="orderdata.status===7" class="orderdetail_top_btn" style="">已拒单</button>
        </div>

        <div style="width:230px">
          <span style="">下单时间: </span>
          <span>{{orderdata.orderTime}}</span>
        </div>
      </div>

      <!-- 收货人详情 -->
      <div style="padding-top:20px">
        <div style="display: flex; justify-content: space-around">
          <span style="width:240px">用户名：{{orderdata.consignee}}</span>
          <span>手机号：{{orderdata.phone}}</span>
        </div>

        <div
          style="
            display: flex;
            justify-content: space-around;
            padding-top: 15px;
          "
        >
          <span style="width:240px">预计送达时间：{{orderdata.estimatedDeliveryTime}}</span>
          <span style="width: 146.3px"></span>
        </div>

        <div
          style="
            display: flex;
            justify-content: space-around;
            padding-top: 15px;
          "
        >
          <span style="width:240px">地址：{{orderdata.address}}</span>
          <span style="width: 146.3px"></span>
        </div>
      </div>

      <!-- 备注 -->
      <div class="orderdetail_notes" style="">
        <span class="orderdetail_notes_sp" style="">备注</span>
        <span style="margin-left: 20px">{{orderdata.remark}}</span>
      </div>

      <div style=" border-bottom: 1px solid rgba(204, 204, 204, 0.164);">
      <div style="display:flex;padding-top:20px;">
        <!-- 购物车 -->
        <div style="width: 80px;margin-left:80px">
          <span >菜品</span>
        </div>

         <div style="display:flex;flex-wrap: wrap;width:90%"  v-for="(item) in  orderdetaildata" :key="item.id">
         <div  style="padding-left:50px;padding-bottom:20px">
          <span >{{item.name}}x{{item.number}}</span>
          <span style="padding-left:50px">￥{{item.amount}}</span>
        </div>

        </div>

       </div>
        <!-- 菜品小计 -->
         <div style="wrap-reverse;margin-left:80px;padding-bottom:20px;">
          <span style="font-weight: bold" >菜品小计: </span>
          <span style="color:red">￥{{total}}</span>
        </div>

        </div>

        <!-- 费用 -->

      <div style=" border-bottom: 1px solid rgba(204, 204, 204, 0.164);">
      <div style="display:flex;padding-top:20px;">

        <div style="width: 80px;margin-left:80px">
          <span >菜品</span>
        </div>

         <div style="display:flex;flex-wrap: wrap;width:90%">
         <div  style="padding-left:50px;width:200px">
          <span >菜品小计：</span>
          <span style="">￥{{total}}</span>
        </div>
      <div style="padding-left:30px;padding-bottom:20px;width:200px">
          <span >派送费：</span>
          <span style="padding-left:10px">￥{{sendfeel}}</span>
        </div>

        <div style="padding-left:50px;padding-bottom:20px;width:200px;">
          <span >打包费：</span>
          <span style="padding-left:15px">￥{{orderdata.packAmount}}</span>
        </div>

        <div style="padding-left:30px;padding-bottom:20px;width:200px;">
          <span >合计：</span>
          <span style="padding-left:25px;color:red">￥{{(total+sendfeel+orderdata.packAmount).toFixed(2)}}</span>
        </div>

        <div style="padding-left:50px;padding-bottom:20px;width:200px;">
          <span >支付渠道：</span>
          <span style="">{{this.orderdata.payMethod===1?'微信支付':'支付宝支付'}}</span>
        </div>

        <div style="padding-left:30px;padding-bottom:20px;width:230px;">
          <span >支付时间：</span>
          <span style="">{{this.orderdata.checkoutTime}}</span>
        </div>

        </div>

       </div>

        </div>

        <!-- 按钮 -->
      <div style="text-align:right;margin-top:20px">

     <div v-if="orderdata.status===2">
            <el-button style="color:rgb(64,158,255)" @click="receivingorders"  size="mini"  >接单</el-button >
            <el-button  style="color:rgb(245,108,108)" @click="reject"  size="mini">拒单</el-button>

              </div>

              <div v-if="orderdata.status===3">
            <el-button style="color:rgb(64,158,255)" @click="dispatch"  size="mini"  >派送</el-button >
             <el-button  style="color:rgb(245,108,108)" @click="cancel"  size="mini">取消</el-button>

              </div>

               <div v-if="orderdata.status===4">
            <el-button style="color:rgb(64,158,255)" @click="complete"  size="mini"  >完成</el-button >
             <el-button  style="color:rgb(245,108,108)" @click="cancel"  size="mini">取消</el-button>

              </div>

              <div v-if="orderdata.status===5">

             <el-button  style="color:rgb(245,108,108)" @click="cancel"  size="mini">取消</el-button>

              </div>

              <div v-if="orderdata.status===6">
            <el-button style="color:rgb(64,158,255)" @click="remove"  size="mini"  >删除</el-button >

              </div>

               <div v-if="orderdata.status===7">
           <el-button  style="color:rgb(245,108,108)" @click="remove"  size="mini">删除</el-button>

              </div>

      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getorderdetail, updateStatus, removeOrder } from '@/api/orderDetail'
import Bus from '@/utils/EventBus'

export default {
  name: 'orderdetailIndex',

  data () {
    return {
      dialogVisible: false,
      orderdata: '',
      index: '',
      nodes: '', // 备注
      orderdetaildata: [],
      sendfeel: 6

    }
  },
  created () {
    Bus.$on('view', (dialogVisible, tableData, index) => {
      this.dialogVisible = dialogVisible
      this.orderdata = tableData[index]
      /*  console.log(tableData, 'tableData')
      console.log(index, 'index') */
      this.queryorderdetail()
    })
  },
  computed: {
    total () {
      return this.orderdetaildata.reduce((sum, item) => sum + item.amount, 0)
    }
  },
  beforeDestroy () {
    // Bus.$off('view')
    /* Bus.$off('view2') */
  },
  methods: {
    // 查询订单详情
    async queryorderdetail () {
      console.log(this.orderdata.id, 'res')
      const res = await getorderdetail((this.orderdata.id))
      this.orderdetaildata = res.data
      console.log(res.data, 'res')
      this.$emit('refreshs')
    },
    // 修改订单状态-接单
    async  receivingorders () {
      await updateStatus(this.orderdata.id, 3)
      this.$emit('refreshs')
      this.dialogVisible = false
    },
    // 修改订单状态-拒单
    reject () {
      this.$confirm('确认要拒单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(this.orderdata.id, 7).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，拒单成功')
            this.$emit('refreshs')
            this.dialogVisible = false
          } else {
            this.$message.error('很遗憾，拒单失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消动作'
        })
      })
    },
    // 修改订单状态-派送
    async  dispatch () {
      await updateStatus(this.orderdata.id, 4)
      this.$emit('refreshs')
      this.dialogVisible = false
    },

    // 修改订单状态-完成
    async  complete () {
      await updateStatus(this.orderdata.id, 5)
      this.$emit('refresh')
      this.dialogVisible = false
    },

    // 修改订单状态-取消
    cancel () {
      this.$confirm('确认要取消订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(this.orderdata.id, 6).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，取消订单成功')
            this.$emit('refreshs')
            this.dialogVisible = false
          } else {
            this.$message.error('很遗憾，取消订单失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消动作'
        })
      })
    },

    // 修改订单状态-删除
    remove () {
      this.$confirm('确认要删除订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeOrder(this.orderdata.id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，删除订单成功')
            this.$emit('refreshs')
            this.dialogVisible = false
          } else {
            this.$message.error('很遗憾，删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style lang="less" secpoed>
// title
.el-dialog__title {
  font-weight: bold;
}
.orderdetail_top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.164);
}
.orderdetail_top_btn {
  margin-left: 20px;
  width: 60px;
  height: 30px;
  color: white;
  border-radius: 5px;
  background-color: black;
}
.orderdetail_notes {
  width: 80%;
  margin-left: 10%;
  margin-top: 30px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid rgba(239, 243, 24, 0.411);

  background-color: rgba(235, 236, 143, 0.199);
}
.orderdetail_notes_sp {
  line-height: 40px;
  margin-left: 10px;
  padding-left: 15px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  background: rgb(243, 219, 110);
}
</style>
